<template>
  <aside class="aside-div">
    <!-- 用户信息 -->
    <div class="user-info fvertical">
      <span class="avatar fcc">CY</span>
      <div class="right fcolumn">
        <span class="phone">18178048200</span>
        <div class="role-list">
          <span class="role">超级管理员</span>
        </div>
      </div>
    </div>
    <!-- 菜单列表 -->
    <div class="menu-list">
      <router-link
        v-for="(menu, index) in menuList" :key="index"
        :to="menu.url"
        @click="() => activeIndex = index"
      >
        <div :class="['menu-item', {'active': activeIndex === index}]">
          <div class="inner-div fvertical">
            <i :class="['iconfont', menu.icon]"></i>
            <span class="name">{{ menu.name }}</span>
          </div>
        </div>
      </router-link>
    </div>
  </aside>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

/**
 * 菜单数据
 */
const menuList = [
  {
    name: '工作台',
    url: '/workplace',
    icon: 'icon-gongzuotai',
  },
  {
    name: '日志查看',
    url: '/logList',
    icon: 'icon-rizhi1',
  },
  {
    name: '规则设置',
    url: '/ruleSetting',
    icon: 'icon-shezhi',
  },
  {
    name: '数据校验文件',
    url: '/dynamicFile',
    icon: 'icon-JS',
  },
  {
    name: '账号管理',
    url: '/acountManage',
    icon: 'icon-zhanghaoguanli',
  },
];

/** 当前激活 */
const activeIndex = ref(0);

onMounted(()=>{
  const index = menuList.findIndex(menu => menu.url === window.location.pathname);
  if (index > -1) {
    activeIndex.value = index;
  } else { /** 匹配不到，跳到第一个路由 */
    window.location.href = menuList[0].url;
  }
})

defineExpose({
  
})
</script>

<style lang="scss" scoped>
.aside-div {
  font-size: 14px;
  flex-basis: 220px;
  color: white;
  background: linear-gradient(294.17deg, #004466 35.57%, #1d4559 92.42%, #1d4559 92.42%);
  .user-info {
    padding: 20px 18px;
    .avatar {
      background-color: #ec5e44;
      border-radius: 4px;
      width: 36px;
      height: 36px;
    }
    .right {
      margin-left: 12px;
      justify-content: space-between;
      .phone {
        font-size: 15px;
        font-weight: 500;
      }
      .role-list {
        .role {
          font-size: 12px;
          color: rgb(172, 172, 172);
        }
      }
    }
  }
  .menu-list {
    .menu-item {
      cursor: pointer;
      height: 40px;
      margin-bottom: 4px;
      position: relative;
      &.active {
        &::before {
          background-color: #0d6895;
        }
        .inner-div {
          color: white;
          background-color: rgb(255, 255, 255, .12);
          .name {
            font-weight: 800;
          }
        }
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 5px;
        width: 5px;
        height: 30px;
        background-color: transparent;
        border-radius: 0 6px 6px 0;
      }
      .inner-div {
        height: 100%;
        margin: 0 15px;
        border-radius: 4px;
        padding: 3px 6px;
        color: rgb(204, 204, 204);
        i {

        }
        .name {
          font-size: 16px;
          margin-left: 14px;
        }
      }
    }
  }
}
</style>
